import styles from './index.module.scss'
import classNames from 'classnames';
import { Checkbox, Row, Col, Input, Collapse, Tag, DatePicker } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useState } from 'react';
import DiscoverData from './components/discoverData'

const CheckboxGroup = Checkbox.Group;
const { RangePicker } = DatePicker;

const OpenData = () => {
	const listTree = [
		{
			key: 'data-type',
			label: 'Date Type',
			data: [
				{
					key: 'dataType-A',
					label: 'A我是很长的名字很长很长的名字好的呵呵呵活得好好',
					num: 1000
				}, {
					key: 'dataType-B',
					label: 'B',
					num: 123
				}, {
					key: 'dataType-C',
					label: 'C',
					num: 123
				}, {
					key: 'dataType-D',
					label: 'A我是很长的名字很长很长的名字好的呵呵呵活得好好',
					num: 123
				}, {
					key: 'dataType-E',
					label: 'B',
					num: 123
				}, {
					key: 'dataType-F',
					label: 'C',
					num: 123
				}, , {
					key: 'dataType-G',
					label: 'B',
					num: 123
				}, {
					key: 'dataType-H',
					label: 'C',
					num: 123
				}
			]
		}, {
			key: 'contributor',
			label: 'Contributor',
			data: [
				{
					key: 'contributor-A',
					label: 'A1',
					num: 123
				}, {
					key: 'contributor-B',
					label: 'B2',
					num: 123
				}, {
					key: 'contributor-C',
					label: 'C3',
					num: 123
				}
			]
		}
	]
	const selectPro = (list) => {
		console.log(list)
	}

	let defaultActiveKey = []

	const items = listTree.map(item => {
		defaultActiveKey.push(item.key)
		return {
			key: item.key,
			label: item.label,
			children: <div className={classNames(styles.groupBox)} key={item.key}>
				{item.data.map(son => {
					return (
						<div key={son.value}>
							<Checkbox className={styles.checkBox} value={son.key}>{son.label}</Checkbox>
							<Tag className={styles.tagBox} bordered={false} color="magenta">
								{son.num}
							</Tag>
						</div>
					)
				})}
			</div>
		}
	})
	return (
		<div className={classNames("container", styles.openDataBox)}>
			<h2>Discover<span>Open resources shared with the OGA community</span></h2>
			<Row gutter={30}>
				<Col span={6}>
					<div>
						<Input placeholder="Search Resources By Title" prefix={<SearchOutlined />} />
						<RangePicker className={styles.searchBox} />
						<CheckboxGroup className={styles.searchBox} onChange={selectPro} >
							<Collapse style={{ width: "100%" }} size="small" items={items} defaultActiveKey={defaultActiveKey} />
						</CheckboxGroup>
					</div>
				</Col>
				<Col span={18}>
					<DiscoverData />
				</Col>
			</Row>
		</div>
	)
}
export default OpenData;